<template>
  <div class="main">
    <div>
      <el-container>
        <el-aside width="200px" style="background-color: #fff; padding: 0">
          <el-input v-model="process.name" placeholder="请输入工序名称" clearable @keyup.enter.native="getProcessList"
                    style="margin-bottom: 10px;margin-top: 20px"></el-input>
          <el-menu>
            <el-menu-item v-for="(item,index) in processList" :key="index" :index="index"
                          @click="getEmployeeByName(item.id)" style="justify-content: center;display: flex">{{item.name}}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0px">
          <fcTable
            ref="table"
            :columes="columes"
            :selection="false"
            :url="this.list"
            :deletUrl="universalUrl"
          >
            <!-- 表上头按钮插槽 -->
            <template v-slot:button>
              <el-button
                icon="el-icon-circle-plus-outline"
                type="primary"
                v-hasPermi="['system']"
                @click="add()"
              >新增
              </el-button
              >
            </template>

            <!-- 表格行插槽 -->
            <template #status="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value=0
                :inactive-value=1
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="upStatus(scope.row)"
              >
              </el-switch>
            </template>
            <template #operation="scope">
              <el-link type="primary" style="margin-right: 5px" @click="edit(scope.row)">编辑</el-link>
            </template>
          </fcTable>
        </el-main>
      </el-container>
    </div>
    <processActionAdd
      :title="title"
      :visible.sync="visible"
      :item="element"
      @Ok="addAndEdit"
    ></processActionAdd>
  </div>
</template>
<script>
  import request from "@/utils/request";
  import fcTable from "@/components/futureCloudMOM/fcTable";
  import processActionAdd from "./processActionAdd";
  import {getProcessByNameAndCode} from "../basic_process/process"

  export default {
    name: "ProcessAction",
    components: {
      fcTable,
      processActionAdd,
    },
    data() {
      return {
        columes: [
          {
            label: "工位名称",
            key: "actionName",
            visible: true,
          },
          {
            label: "工位编码",
            key: "actionCode",
            visible: true,
          },
          {
            label: "工序名称",
            key: "processId",
            visible: true,
            table: "Basic_process",
            search: true,
          },
          {
            label: "工位单价",
            key: "actionPriceOne",
            visible: true,
          },
          {
            label: "状态",
            key: "status",
            visible: true,
            type: "slot",
            dictCode: "sys_normal_disable",
          },
          {
            label: "操作",
            key: "operation",
            //是否支持删除功能
            delete: true,
            //插槽需要的属性
            type: "slot",
            fixed: "right",
            //显隐列需要的属性
            visible: true,
            disabled: true,
            //不支持搜索 写入
            search: true,
          },
        ],
        //新增/编辑弹窗打开的标题
        title: "",
        //显隐
        visible: false,
        //数据
        element: {},
        //列表页
        list: "basic/process/action/getList",
        //新增 修改 删除
        universalUrl: "basic/process/action",

        /**
         * 左侧树
         */
        // 数据
        processList: [],
        // 对象参数
        process: {
          name: "",
          code: ""
        },
        // 分页参数
        page: {
          pageNum: 1,
          pageSize: 1000
        },
        // 总条数
        total: 0

      };
    },
    created() {
      this.getProcessList();
    },
    methods: {
      add() {
        this.element = null;
        this.title = "新增";
        this.visible = true;
      },
      edit(item) {
        console.log(item);
        this.element = item;
        this.title = "编辑";
        this.visible = true;
      },
      addAndEdit(item) {
        console.log(item);
        let method = "put";
        if (this.title === "新增") {
          method = "post";
        }
        request({
          url: this.universalUrl,
          method: method,
          data: item,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.$refs.table.getList();
            this.visible = false;
          } else {
            this.$message.error(res.message);
          }
        });
      },
// 状态更新
      upStatus(item) {
        request({
          url: this.universalUrl,
          method: "put",
          data: item,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.$refs.table.getList();
          } else {
            this.$message.error(res.message);
          }
        });
      },


      /**
       * 左侧树
       */
      getProcessList() {
        getProcessByNameAndCode(this.process, this.page).then(res => {
          if (res.code === 200) {
            this.processList = res.rows;
          } else {
            this.$message.error("请求异常！！！")
          }
        })
      },
      // 根据工序名称删选数据
      getEmployeeByName(id){
        let join = {
          propertyName: "processId",
          jojntType: "eq",
          price: id,
        };
        var index = this.$refs.table.list.findIndex(item => item.propertyName === "processId")
        if(index === -1){
          this.$refs.table.list.push(join);
        }else{
          this.$refs.table.list[index].price = id;
        }
        this.$refs.table.getList();
      }

    },
  };
</script>
<style scoped>
  .main {
  }
</style>
